<template>
  <div>
    <div id="box" v-for="item in allOrders">
      <div id="header">
        <span>{{item.order.orderCreateTime}}</span>
        <span>订单编号:{{item.order.orderCode}}</span>
      </div>
      <div id="body">
        <img :src="item.film.filmPic" id="pic">
        <h2>《{{item.film.filmName}}》</h2>
        <span>千峰影院(江干区店)</span><br>
        <span style="margin-left: -145px;margin-top: 64px">{{item.film.playHall}}号激光厅</span>
        <span style="margin-left: -40px;margin-top: 64px">{{item.film.seat}}</span><br>
        <span style="margin-left: -175px;margin-top: 80px;">{{item.film.playTime}}</span><br>
      </div>
      <div id="right">
        <span style="float: left;margin-top: 10px;font-size: 15px">￥{{item.order.orderAccount}}</span>
        <span style="float: left;margin-top: 10px;font-size: 15px;margin-left: 80px">已完成</span>
        <span style="float: left;margin-top: 10px;font-size: 15px;margin-left: 94px"><button style="border: none;background-color: white" @click="show">查看详情</button></span>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "My-Order",
        data(){
          return {
            allOrders: [{
              order: {
                id: 34,
                orderCode: "1577136364754stkckyy",
                orderCreateTime: "2019-12-24 05:26",
                userName: "@ä¸çå¥½å¤§",
                orderAccount: 80,
                orderPhone: "15993309785",
                payMethod: "微信支付",
                preferenceLevel: 0,
                orderState: 1,
                userId: 3
              },
              film: {
                id: 32,
                orderCode: "1577136364754stkckyy",
                filmName: "误杀",
                filmPic: "https://p1.meituan.net/movie/967b253953bc7e660cfadbf9d78f67b62852693.jpg@464w_644h_1e_1c",
                filmPrice: 40,
                cinemaName: "杭州千峰影院",
                numbers: 2,
                account: 0,
                playTime: "2019-12-24 8:30",
                playHall: "1",
                showCode: 12,
                seat: "6排6座,6排4座,",
              }
            }
            ]
          }
        },
        methods:{
            show(){
                 //查看详情方法
            },
          ifBeOverdue(){
                 var vm = this;
                  /*先获取到当前用户id*/
                 var uId = JSON.parse(sessionStorage.getItem("userinfo")).id;
                 /*定义当前的状态值为1*/
                 var orderState = 1;

                var order = {
                      userId:uId,
                      orderState:orderState
                }
                /*发起查询请求*/
                 this.axios({
                     method:'post',
                     url:'http://localhost:80/api/order/query/list',
                     data:order
                 }).then(function (res) {
                       if (res.data.success) {
                         vm.allOrders = res.data.data;
                         console.log(vm.allOrders)
                       }
                 })
            }
        },
      created() {
          /*每次加载我的订单界面的时候，先去遍历一下数据库里面订单的消费时间是否过期，如果过期，就改为历史订单*/
          this.ifBeOverdue();
      }
    }
</script>

<style scoped>
  #box{
    width: 700px;
    height: 200px;
    border: 1px solid #E4E7ED;
    box-shadow: 0px 0px 2px #DCDFE6;
    float: left;
    margin-left: 350px;
  }
  #header{
    width: 700px;
    height: 50px;
    border: 1px solid #E4E7ED;
    box-shadow: 0px 0px 2px #DCDFE6;
    background-color:rgba(220,220,220,0.5);
  }
  #header span{
    float: left;
    margin-top: 15px;
    font-size: 15px;
    margin-left: 40px;
  }
  #bu1{
    width: 30px;
    height: 40px;
    margin-right: 200px;
    margin-top: 6px;
    background-color: rgba(220,220,220,0.4);
  }
  #pic{
    width: 88px;
    height: 125px;
    float: left;
    border: #DCDCDC solid 2px;
    margin-left: 11px;
    margin-top: 11px;
  }
  #body h2{
    float: left;
    margin-left: 10px;
  }
  #body span{
    float: left;
    margin-top: 50px;
    font-size: 17px;
    margin-left: -75px;
  }
  #right{
    width: 360px;
    height: 40px;
    /*border: #F56C6C solid 1px;*/
    float: right;

  }
  #right span{
    margin-left: 30px;
  }
  span{
    font-family: 华文楷体;
  }
</style>
